<template>
    <div class="divBox">
      <el-row :gutter="24" class="mb20">
        <el-col :span="8">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
<!--                  <el-avatar icon="el-icon-s-data" size="small" style="color:#1890ff;background:#e6f7ff;font-size: 13px" />-->
<!--                  <span class="ivu-pl-8">订单</span>-->
                  <div class="header_title">村级活动分类情况</div>
                </div>
                <div class="checkTime" hidden>
                  <el-radio-group v-model="visitDate" class="ivu-mr-8" @change="radioChange">
                    <el-radio-button label="year">2019年</el-radio-button>
                    <el-radio-button label="last301">2020年</el-radio-button>
                    <el-radio-button label="week">2021年</el-radio-button>
                    <el-radio-button label="month">2022年</el-radio-button>
                    <el-radio-button label="last30">2023年</el-radio-button>
                  </el-radio-group>
                </div>
              </div>
            </div>
            <echarts-from ref="visitChart" echartsTitle="circle" :seriesData="seriesCircle.activityList"></echarts-from>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <!-- <el-avatar icon="el-icon-s-data" size="small" style="color:#1890ff;background:#e6f7ff;font-size: 13px" />
                  <span class="ivu-pl-8">订单</span> -->
                  <div class="header_title">在线学习文章分类情况</div>
                </div>
                <div class="checkTime" hidden>
                  <el-radio-group v-model="visitDate" class="ivu-mr-8" @change="radioChange">
                    <el-radio-button label="year">2019年</el-radio-button>
                    <el-radio-button label="last301">2020年</el-radio-button>
                    <el-radio-button label="week">2021年</el-radio-button>
                    <el-radio-button label="month">2022年</el-radio-button>
                    <el-radio-button label="last30">2023年</el-radio-button>
                  </el-radio-group>
                </div>
              </div>
            </div>
            <echarts-from ref="visitChart" echartsTitle="circle" :seriesData="seriesCircle.studyList"></echarts-from>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <!-- <el-avatar icon="el-icon-s-data" size="small" style="color:#1890ff;background:#e6f7ff;font-size: 13px" />
                  <span class="ivu-pl-8">订单</span> -->
                  <div class="header_title">积分商城商品分类情况</div>
                </div>
                <div class="checkTime" hidden>
                  <el-radio-group v-model="visitDate" class="ivu-mr-8" @change="radioChange">
                    <el-radio-button label="year">2019年</el-radio-button>
                    <el-radio-button label="last301">2020年</el-radio-button>
                    <el-radio-button label="week">2021年</el-radio-button>
                    <el-radio-button label="month">2022年</el-radio-button>
                    <el-radio-button label="last30">2023年</el-radio-button>
                  </el-radio-group>
                </div>
              </div>
            </div>
            <echarts-from ref="visitChart" echartsTitle="circle" :seriesData="seriesCircle.goodsList"></echarts-from>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="24" class="mb20">
        <el-col :span="24">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <!-- <el-avatar icon="el-icon-s-data" size="small" style="color:#1890ff;background:#e6f7ff;font-size: 13px" />
                  <span class="ivu-pl-8">订单</span> -->
                  <div class="header_title">近15天村级活动报名数量趋势统计</div>
                </div>
                <div class="checkTime" hidden>
                  <el-radio-group v-model="visitDate" class="ivu-mr-8" @change="radioChange">
                    <el-radio-button label="year">2019年</el-radio-button>
                    <el-radio-button label="last301">2020年</el-radio-button>
                    <el-radio-button label="week">2021年</el-radio-button>
                    <el-radio-button label="month">2022年</el-radio-button>
                    <el-radio-button label="last30">2023年</el-radio-button>
                  </el-radio-group>
                </div>
              </div>
            </div>
            <h4></h4>
            <echarts-from ref="visitChart" :yAxisData="yAxisDataActivity" :seriesData="seriesActivity" :xAxis="xAxisActivity" :legendData="legendDataActivity"></echarts-from>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="mb20">
        <el-col :span="24">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <!-- <el-avatar icon="el-icon-s-data" size="small" style="color:#1890ff;background:#e6f7ff;font-size: 13px" />
                  <span class="ivu-pl-8">订单</span> -->
                  <div class="header_title">近15天积分兑换商品数量趋势统计</div>
                </div>
                <div class="checkTime" hidden>
                  <el-radio-group v-model="visitDate" class="ivu-mr-8" @change="radioChange">
                    <el-radio-button label="year">2019年</el-radio-button>
                    <el-radio-button label="last301">2020年</el-radio-button>
                    <el-radio-button label="week">2021年</el-radio-button>
                    <el-radio-button label="month">2022年</el-radio-button>
                    <el-radio-button label="last30">2023年</el-radio-button>
                  </el-radio-group>
                </div>
              </div>
            </div>
            <h4></h4>
            <echarts-from ref="visitChart" :yAxisData="yAxisDataGoods" :seriesData="seriesGoods" :xAxis="xAxisGoods" :legendData="legendDataGoods"></echarts-from>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="24" class="mb20">
        <el-col :span="12" v-if="isShow">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <!-- <el-avatar icon="el-icon-s-data" size="small" style="color:#1890ff;background:#e6f7ff;font-size: 13px" />
                  <span class="ivu-pl-8">订单</span> -->
                  <div class="header_title">用户当前积分前十</div>
                </div>
                <div class="checkTime" hidden>
                  <el-radio-group v-model="visitDate" class="ivu-mr-8" @change="radioChange">
                    <el-radio-button label="year">2019年</el-radio-button>
                    <el-radio-button label="last301">2020年</el-radio-button>
                    <el-radio-button label="week">2021年</el-radio-button>
                    <el-radio-button label="month">2022年</el-radio-button>
                    <el-radio-button label="last30">2023年</el-radio-button>
                  </el-radio-group>
                </div>
              </div>
            </div>
            <h4></h4>
            <el-table :data="listData.list1" size="mini" height="475px" style="overflow-y: auto;" :header-cell-style=" {fontWeight:'bold',background:'#f8f8f9',color: '#515a6e',height:'40px'}" border>
              <el-table-column label="排名" prop="ranking" min-width="60" align="center"/>
              <el-table-column label="姓名" prop="name" min-width="120" align="center"/>
              <el-table-column label="联系方式" prop="phoneNumber" min-width="120" align="center"/>
              <el-table-column label="当前积分" prop="integral" min-width="120" align="center"/>
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="isShow ? 12 : 24">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <!-- <el-avatar icon="el-icon-s-data" size="small" style="color:#1890ff;background:#e6f7ff;font-size: 13px" />
                  <span class="ivu-pl-8">订单</span> -->
                  <div class="header_title">用户兑换商品消费积分前十</div>
                </div>
                <div class="checkTime" hidden>
                  <el-radio-group v-model="visitDate" class="ivu-mr-8" @change="radioChange">
                    <el-radio-button label="year">2019年</el-radio-button>
                    <el-radio-button label="last301">2020年</el-radio-button>
                    <el-radio-button label="week">2021年</el-radio-button>
                    <el-radio-button label="month">2022年</el-radio-button>
                    <el-radio-button label="last30">2023年</el-radio-button>
                  </el-radio-group>
                </div>
              </div>
            </div>
            <h4></h4>
            <el-table :data="listData.list2" size="mini" height="475px" style="overflow-y: auto;" :header-cell-style=" {fontWeight:'bold',background:'#f8f8f9',color: '#515a6e',height:'40px'}" border>
              <el-table-column label="排名" prop="ranking" min-width="60" align="center"/>
              <el-table-column label="姓名" prop="name" min-width="120" align="center"/>
              <el-table-column label="联系方式" prop="phoneNumber" min-width="120" align="center"/>
              <el-table-column label="消费积分" prop="bonusPoints" min-width="120" align="center"/>
            </el-table>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="24">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <!-- <el-avatar icon="el-icon-s-data" size="small" style="color:#1890ff;background:#e6f7ff;font-size: 13px" />
                  <span class="ivu-pl-8">订单</span> -->
                  <div class="header_title">用户概览</div>
                </div>
              </div>
            </div>
            <div class="special-chat" ref="visitChart">
              <img :src="statisticsBg">
              <div class=special-chat-box>
                <div class="line-box">
                  <div class="chat-line">注册用户数量：{{seriesWxUser.registerCount}}</div>
                  <div class="chat-line">实名用户数量：{{seriesWxUser.realNameCount}}</div>
                </div>
                <div class="line-box">
                  <div class="chat-line">报名用户数量：{{seriesWxUser.applicationCount}}</div>
                  <div class="chat-line">学习用户数量：{{seriesWxUser.articleViewCount}}</div>
                </div>
                <div class="line-box">
                  <div class="chat-line">获取积分用户：{{seriesWxUser.getIntegralCount}}</div>
                  <div class="chat-line">消费积分用户：{{seriesWxUser.consumerUsersCount}}</div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
</template>
<script>
import {
  chartCirclePie,
  chartCirclePie1,
  chartCirclePie2,
  chartActivityApi,
  chartGoodsApi,
  chartTableApi,
  chartTableApi1,
  chartWxUser
} from '@/api/dashboard';
  import echartsFrom from '@/components/echarts/index';
  import { checkPermi,checkAdminRole } from "@/utils/permission"; // 权限判断函数

  export default {
    components: {echartsFrom},
    data() {
      return {
        //info: {},
        infoList: null,
        statisticsBg:require("@/assets/imgs/statistic_bg.jpg"),

        seriesCircle:{
          'activityList':[],
          'studyList':[],
          'goodsList':[],
        },

        seriesActivity: [],
        xAxisActivity: [],
        legendDataActivity: [],
        yAxisDataActivity:[],

        seriesGoods: [],
        xAxisGoods: [],
        legendDataGoods: [],
        yAxisDataGoods:[],

        seriesWxUser:{},

        visitDate: 'last30',
        listData:{
          departmentList:[],
          userList:[]
        },
        yAxisData: [],

        isShow:false,//根据是否超级管理员控制展示不同统计图
      }
    },
    mounted(){
      if(checkAdminRole()){
        this.isShow = true
      }
      this.yAxisDataActivity = [
        {
          type: 'value',
          name: '数量趋势',
          minInterval:1,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#7F8B9C'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#F5F7F9'
            }
          }
        },
        {
          type: 'value',
          name: '零活数量',
          minInterval:1,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#7F8B9C'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#F5F7F9'
            }
          }
        },
      ]
      this.yAxisDataGoods = [
        {
          type: 'value',
          name: '商品数量趋势',
          minInterval:1,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#7F8B9C'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#F5F7F9'
            }
          }
        },
        {
          type: 'value',
          name: '商品数量',
          minInterval:1,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#7F8B9C'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#F5F7F9'
            }
          }
        },
      ]
    },
    methods: {
      checkPermi,
      //饼图
      statisticsCirclePie(){
        chartCirclePie().then(async res => {
          this.seriesCircle.activityList = res;
        })
        chartCirclePie1().then(async res => {
          this.seriesCircle.studyList = res;
        })
        chartCirclePie2().then(async res => {
          this.seriesCircle.goodsList = res;
        })
      },
      //柱状图
      chartActivity() {
        this.xAxisActivity = []
        this.legendDataActivity = []
        chartActivityApi().then(async res => {
        //后期接口调用
        /*let res = {
          "typeData":{"2019":[101,201],"2020":[120,110],"2021":[151,115],"2022":[130,210],"2023":[110,320]},
          "numData":{"2019":303,"2020":230,"2021":266,"2022":340,"2023":430},
        };*/

        //this.info = res
        let num = []
        let nums1 = []
        let nums2 = []
        let nums3 = []
        for (let key  in res.typeData) {
          nums1.push(Number(res.typeData[key][0]))
          nums2.push(Number(res.typeData[key][1]))
          nums3.push(Number(res.typeData[key][2]))
          this.xAxisActivity.push(key)
        }
        for (let key  in res.numData) {
          num.push(Number(res.numData[key]))
        }
        this.legendDataActivity = ["待审核","通过","拒绝"]
        this.seriesActivity = [{
          name:"待审核",
          type:"bar",
          stack: 'Ad',
          barWidth: '50px',
          emphasis: {
            focus: 'series'
          },
          itemStyle:{
            normal:{
              color:'#4BCAD5',
            }
          },
          data: nums1
        }, {
          name:"通过",
          type:"bar",
          stack: 'Ad',
          emphasis: {
            focus: 'series'
          },
          itemStyle:{
            normal:{
              color:'#91cc75',
            }
          },
          data: nums2
        }, {
          name:"拒绝",
          type:"bar",
          stack: 'Ad',
          emphasis: {
            focus: 'series'
          },
          itemStyle:{
            normal:{
              color:'#ff9c93',
            }
          },
          data: nums3
        }, {
          name:"数量趋势",
          type:"line",
          smooth: true,
          itemStyle:{
            normal:{
              color:'#1890ff',
            }
          },
          yAxisIndex: 1,
          data: num
        }]
        })
      },
      chartGoods() {
        this.xAxisGoods = []
        this.legendDataGoods = []
        chartGoodsApi().then(async res => {
          //后期接口调用
          /*let res = {
            "typeData":{"2019":[101,201],"2020":[120,110],"2021":[151,115],"2022":[130,210],"2023":[110,320]},
            "numData":{"2019":303,"2020":230,"2021":266,"2022":340,"2023":430},
          };*/

          //this.info = res
          let num = []
          let nums1 = []
          let nums2 = []
          let nums3 = []
          for (let key  in res.typeData) {
            nums1.push(Number(res.typeData[key][0]))
            nums2.push(Number(res.typeData[key][1]))
            nums3.push(Number(res.typeData[key][2]))
            this.xAxisGoods.push(key)
          }
          for (let key  in res.numData) {
            num.push(Number(res.numData[key]))
          }
          this.seriesGoods = [{
            name:"待核销",
            type:"bar",
            stack: 'Ad',
            barWidth: '50px',
            emphasis: {
              focus: 'series'
            },
            itemStyle:{
              normal:{
                color:'#4BCAD5',
              }
            },
            data: nums1
          }, {
            name:"已核销",
            type:"bar",
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            itemStyle:{
              normal:{
                color:'#91cc75',
              }
            },
            data: nums2
          }, {
            name:"拒绝",
            type:"bar",
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            itemStyle:{
              normal:{
                color:'#ffe731',
              }
            },
            data: nums3
          }, {
            name:"商品数量趋势",
            type:"line",
            smooth: true,
            itemStyle:{
              normal:{
                color:'#1890ff',
              }
            },
            yAxisIndex: 1,
            data: num
          }]
        })
      },

      //列表
      chartDataList(){
        chartTableApi().then(async res => {
          this.listData.list1 = res
        });
        chartTableApi1().then(async res => {
          this.listData.list2 = res
        });
      },
      chartWxUser(){
        chartWxUser().then(async res => {
          this.seriesWxUser = res;
        })
      },

      radioChange(val){
        switch (val) {
          case 'week':
            this.handleChangeWeek();
            break;
          case 'month':
            this.handleChangeMonth();
            break;
          case 'year':
            this.handleChangeYear();
            break;
          default:
            this.handleChangeVisitType();
            break;
        }
      },
      // 时间改变
      handleChangeVisitType() {
        this.xAxis = []
        this.legendData = []
        //chartOrder30Api().then(async res => {
        //后期接口调用
        let res = {
          "price":{"09-24":"110","09-25":"294","09-26":"0","09-27":"100","09-28":0,"09-29":"269","09-30":"294","10-01":"0","10-02":0,"10-03":"323","10-04":"614","10-05":"750","10-06":"811","10-07":"100","10-08":"295","10-09":"0","10-10":"218","10-11":"511","10-12":"994","10-13":0,"10-14":"681","10-15":"0","10-16":"100","10-17":"0","10-18":"315","10-19":"0","10-20":"106","10-21":"0","10-22":"946","10-23":"50","10-24":"477"},
          "quality":{"09-24":30,"09-25":20,"09-26":10,"09-27":30,"09-28":0,"09-29":40,"09-30":40,"10-01":10,"10-02":0,"10-03":10,"10-04":50,"10-05":170,"10-06":90,"10-07":30,"10-08":340,"10-09":20,"10-10":100,"10-11":3,"10-12":6,"10-13":0,"10-14":64,"10-15":1,"10-16":2,"10-17":2,"10-18":5,"10-19":4,"10-20":4,"10-21":4,"10-22":13,"10-23":9,"10-24":3}
        };

          //this.info = res
          let pices = []
          let qualitys = []
          for (let key  in res.price) {
            pices.push(Number(res.price[key]))
            this.xAxis.push(key)
          }
          for (let key  in res.quality) {
            qualitys.push(Number(res.quality[key]))
          }
          this.legendData = ['试验数','成功数']
          this.series = [{
            name:"试验数",
            type:"bar",
            itemStyle:{
              normal:{
                  color:'#5B8FF9',
              }
            },
            data: pices
          },
            {
              name:"成功数",
              type:"line",
              smooth: true,
              itemStyle:{
                normal:{
                  color:'#4BCAD5',
              }
              },
              yAxisIndex: 1,
              data: qualitys
            }]
        //})
      },
      handleChangeWeek() {
        this.xAxis = []
        this.legendData = []
        //chartOrderWeekApi().then(async res => {
          this.info = res
          this.legendData = ["上周金额", "本周金额", "上周订单数", "本周订单数"]
          let prePrice = []
          let price = []
          let qualitys = []
          let preQuality = []
          for (let key  in res.prePrice) {
            prePrice.push(Number(res.prePrice[key]))
            this.xAxis.push(key)
          }
          for (let key  in res.price) {
            price.push(Number(res.price[key]))
          }
          for (let key  in res.preQuality) {
            preQuality.push(Number(res.preQuality[key]))
          }
          for (let key  in res.quality) {
            qualitys.push(Number(res.quality[key]))
          }
          this.series = [
            {
              name :"上周金额",
              type:"bar",
              itemStyle:{
                normal:{
                  color:'#5B8FF9',
                }
              },
              data: prePrice
            },
            {
              name:"本周金额",
              type:"bar",
              itemStyle:{
                normal:{color:'#4BCAD5',}
              },
              data: price
            },
            {
              name:"上周订单数",
              type:"line",
              smooth: true,
              itemStyle:{
                normal:{color:'#E6A23C',}
              },
              yAxisIndex: 1,
              data: preQuality
            },
            {
              name:"本周订单数",
              type:"line",
              smooth: true,
              itemStyle:{
                normal:{color:'#768A9C',}
              },
              yAxisIndex: 1,
              data: qualitys
            }
          ]
        //})
      },
      handleChangeMonth() {
        this.xAxis = []
        this.legendData = []
        //chartOrderMonthApi().then(async res => {
          this.info = res
          this.legendData = ["上月金额", "本月金额", "上月订单数", "本月订单数"]
          let prePrice = []
          let price = []
          let qualitys = []
          let preQuality = []
          for (let key  in res.prePrice) {
            prePrice.push(Number(res.prePrice[key]))
            this.xAxis.push(key)
          }
          for (let key  in res.price) {
            price.push(Number(res.price[key]))
          }
          for (let key  in res.preQuality) {
            preQuality.push(Number(res.preQuality[key]))
          }
          for (let key  in res.quality) {
            qualitys.push(Number(res.quality[key]))
          }
          this.series = [
            {
              name:"上月金额",
              type:"bar",
              itemStyle:{
                "normal":{
                  color:'#5B8FF9',
                }
              },
              data: prePrice
            },
            {
              name:"本月金额",
              type:"bar",
              itemStyle:{
                "normal":{
                  color:'#4BCAD5'
                }
              },
              data: price
            },
            {
              name:"上月订单数",
              type:"line",
              smooth: true,
              itemStyle:{
                "normal":{
                  color:'#E6A23C'
                }
              },
              yAxisIndex: 1,
              data: preQuality
            },
            {
              name:"本月订单数",
              type:"line",
              smooth: true,
              itemStyle:{
                "normal":{
                  color:'#768A9C'
                }
              },
              yAxisIndex: 1,
              data: qualitys
            }
          ]
        //})
      },
      handleChangeYear() {
        this.xAxis = []
        this.legendData = []
        //chartOrderYearApi().then(async res => {
          this.info = res
          this.legendData =  ["去年金额", "今年金额", "去年订单数", "今年订单数"]
          let prePrice = []
          let price = []
          let qualitys = []
          let preQuality = []
          for (let key  in res.prePrice) {
            prePrice.push(Number(res.prePrice[key]))
            this.xAxis.push(key)
          }
          for (let key  in res.price) {
            price.push(Number(res.price[key]))
          }
          for (let key  in res.preQuality) {
            preQuality.push(Number(res.preQuality[key]))
          }
          for (let key  in res.quality) {
            qualitys.push(Number(res.quality[key]))
          }
          this.series = [ ////let col = ["#B37FEB", "#FFAB2B", "#1890FF", "#00C050"];
            {
              name:"去年金额",
              type:"bar",
              itemStyle:{
                "normal":{
                  color:'#5B8FF9'
                }
              },
              data: prePrice
            },
            {
              name:"今年金额",
              type:"bar",
              itemStyle:{
                "normal":{
                  color:'#4BCAD5'
                }
              },
              data: price
            },
            {
              name:"去年订单数",
              type:"line",
              smooth: true,
              itemStyle:{
                "normal":{
                  color:'#E6A23C'
                }
              },
              yAxisIndex: 1,
              data: preQuality
            },
            {
              name:"今年订单数",
              type:"line",
              smooth: true,
              itemStyle:{
                "normal":{
                  color:'#768A9C'
                }
              },
              yAxisIndex: 1,
              data: qualitys
            }
          ]
        //})
      },

      // 监听页面宽度变化，刷新表格
      handleResize() {
        if (this.infoList) this.$refs.visitChart.handleResize();
      }
    },
    created() {
      this.statisticsCirclePie()
      this.chartActivity()
      this.chartGoods()

      this.chartDataList()
      this.chartWxUser()

      //this.handleChangeVisitType();
    }
  }
</script>
<style lang="scss" scoped>
  .acea-row{
    ::v-deep.el-avatar--small {
      width: 22px;
      height: 22px;
      line-height: 22px;
    }
  }
  .special-chat{
    width:100%;
    height:294px;
    position: relative;
    img{
      width:100%;
      height:100%;
      position: absolute;
    }

    .special-chat-box{
      width:100%;
      position: absolute;
      .line-box{
        height:calc(294px / 3);
        line-height:calc(294px / 3);
        display:flex;
        justify-content: space-around;
        .chat-line{
          font-size:18px;
          font-weight:bold;
        }
        .chat-line:nth-child(2){
          color:#fff;
          padding-left:20%;
        }
      }
    }
  }
  .header_title{
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #000000;
    //padding-left:8px;
    position: relative;
    &::before{
      position: absolute;
      content: '';
      width: 0px;
      height: 18px;
      background: #1890FF;
      top:0;
      left:0;
    }
  }
  .checkTime{
    ::v-deep.el-radio__input{
      display: none;
    }
  }
  .ivu-pl-8{
    margin-left: 8px;
    font-size: 14px;
  }
  .divBox {
    padding: 0 20px !important;
  }
  .dashboard-console-visit {
    ::v-deep.el-card__header{
      padding: 14px 20px !important;
    }
    ul {
      li {
        list-style-type: none;
        margin-top: 12px;
      }
    }
  }
  .ivu-mb{
    margin-bottom: 10px;
  }
</style>
